//队伍信息面板
import { Col, Row, Card, Descriptions, List, Tag, Typography, ConfigProvider } from 'antd';
const { Paragraph } = Typography;
import { useState, useEffect } from 'react';
import TeamCommitFlagPanel from '../TeamCommitFlagPanel';
import TeamHostNetInfoListPanel from '../TeamHostNetInfoListPanel';
import TeamAttackRecordPanel from '../TeamAttackRecordPanel';
import { queryOwnTeamHostDetailInfo } from '../../../../../services/competitionTeam/index';
import { queryOwnTeamDetailInfo } from '../../../../../services/team/user/index'
import CompStatusEnum from '@/components/Enum/CompStatusEnum';
import styles from './index.less'
const TeamInfoPanel = () => {
    const [teamInfo, setTeamInfo] = useState({});
    const [hostInfo, setHostInfo] = useState({});
    const [columnNum, setColumnNum] = useState(3)
    useEffect(() => {
        initOwnTeamInfo()
    }, [])
    //初始化所属队伍信息
    const initOwnTeamInfo = async () => {
        const res = await queryOwnTeamDetailInfo()
        if (res.success) {
            setTeamInfo(res.data)
            initTeamHostInfo()
        }
    }
    const initTeamHostInfo = async () => {
        const res = await queryOwnTeamHostDetailInfo()
        if (res.success) {
            setHostInfo(res.data)

        }
    }
    const items = [
        {
            label: '队伍名称',
            children: teamInfo.teamName,
        },
        {
            label: '赛事名称',
            children: hostInfo.competitionName,
        },
        {
            label: '赛事状态',
            children: CompStatusEnum(hostInfo.competitionStatus),
        },
        {
            label: '赛事总回合数',
            children: hostInfo.roundCount,
        },
        {
            label: '每回合时长（分钟）',
            children: hostInfo.roundDuration,
        },
        {
            label: '当前回合数',
            children: hostInfo.currentRoundCount ? hostInfo.currentRoundCount : '暂无',
        },
        {
            span: 1,
            label: '主机网络地址',
            children: <Paragraph copyable={hostInfo?.teamNetAddress}>{hostInfo?.teamNetAddress}</Paragraph>,
        },
        {
            span: 2,
            label: '端口号',
            children: <Paragraph copyable={hostInfo?.teamNetPort}>{hostInfo?.teamNetPort}</Paragraph>,
        },
        {
            span: 1,
            label: '账号',
            children: <Paragraph copyable={hostInfo?.teamAccount}>{hostInfo?.teamAccount}</Paragraph>,
        },
        {
            span: 2,
            label: '密码',
            children: <div>{hostInfo?.teamPassword && <Paragraph copyable={{ text: hostInfo?.teamPassword }}>******************</Paragraph>}</div>,
        }
    ]
    return (
        <>
            <Row>
                <Col span={24}>
                    <Card>
                        <ConfigProvider
                            theme={{
                                components: {
                                    Descriptions: {
                                        itemPaddingBottom:9
                                    },
                                },
                            }}
                        >
                            <Descriptions title="基本信息" column={columnNum} items={items} />
                        </ConfigProvider>

                    </Card>
                </Col>
            </Row>
            <Row>
                <Col span={10}>
                    <Row>
                        <Col span={24}>
                            <Card>
                                <List
                                    header={
                                        <div>队员列表</div>
                                    }
                                    className={styles.container}
                                    bordered
                                    dataSource={teamInfo.teamUserList}
                                    renderItem={(item) => (
                                        <List.Item>
                                            <div style={{ textAlign: "center" }}>{item.userName}</div>
                                            <div style={{ textAlign: "center" }}><Tag color={item.userRoleName === '队长' ? 'gold' : 'blue'}>{item.userRoleName}</Tag></div>
                                        </List.Item>
                                    )}
                                />
                            </Card>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <TeamAttackRecordPanel competitionUnCode={hostInfo.competitionUnCode} competitionStatus={hostInfo.competitionStatus} />
                        </Col>
                    </Row>
                </Col>
                <Col span={14}>
                    <Row>
                        <Col span={24}>
                            <TeamCommitFlagPanel />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <TeamHostNetInfoListPanel competitionUnCode={hostInfo.competitionUnCode} competitionStatus={hostInfo.competitionStatus} />
                        </Col>
                    </Row>
                </Col>
            </Row>
        </>
    )
}
export default TeamInfoPanel;